<template>
  <div>
  <el-card>
    <el-form inline>


      <el-form-item label="姓名：" class="mgb-0">
        <el-input v-model="user.name"></el-input>
      </el-form-item>

      <el-form-item label="地址：" class="mgb-0">
        <el-input v-model="user.address"></el-input>
      </el-form-item>
      <el-form-item class="mgb-0">
        <el-button type="primary" icon="el-icon-search" @click="handleSearchData()"></el-button>
        <el-button type="success" icon="el-icon-refresh" @click="handleClearData()"></el-button>
      </el-form-item>
      </el-form>
  </el-card>
<!--    style="margin-top: 10px"-->
    <el-card style="margin-bottom: 10px">
    <div style="margin-bottom: 10px">
      <el-button type="primary" @click="handleAdd()">新增</el-button>
      <el-button type="success" @click="handle_ev()">审核</el-button>
      <el-button type="success" @click="handle_delete()">批量删除</el-button>
    </div>
    <el-table :data="pages.rows" ref="select" v-loading="tableLoading"   style="width: 100%">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="日期" prop="date" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="姓名" prop="name" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="地址" prop="address" align="center" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
          <el-button type="text" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button type="text" style="color: red" @click="handleDelete(scope.row)">删除</el-button>

        </template>
      </el-table-column>
    </el-table>
    <el-pagination
    style="float: right;margin: 10px 0;"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pages.page"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pages.pageSize"
    layout="total,sizes,prev,pager,next,jumper"
    prev-text="上一页"
    next-text="下一页"
    :total="pages.totalRows">

    </el-pagination>
    </el-card>
    <add_user v-if="showPage.add" :userAdd="userOne" @close="handle_close($event)"></add_user>
    <detail_user v-if="showPage.detail"  :user="userOne" @close="handle_close($event)"></detail_user>
    <update_user v-if="showPage.update" :userUpdate="userOne" @close="handle_close($event)"></update_user>
    <check_user v-if="showPage.check" :userCheck="userOne" @close="handle_close($event)"></check_user>
  </div>

</template>

<script>


import IdManager from "@/api/dataManage/IdManager";
import add_user from "@/views/dataManager/components/add_user";
import detail_user from "@/views/dataManager/components/detail_user";
import update_user from "@/views/dataManager/components/update_user";
import check_user from "@/views/dataManager/components/check_user";
export default {
  name: "idManager",
  components:{
    add_user,
    detail_user,
    update_user,
    check_user,
  },
  data() {
    return {
      user: {
        name: '',
        address: '',
        date: null,
      },
      tableLoading: false,
      pages: {
        rows: [],
        page: 1, //当前页面
        pageSize: 10, // 当前页数
        totalRows: 0, // 总条数
      },
      showPage: {
        add: false,
        detail: false,
        update: false,
        check:false,
      },
      userOne:{}

    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const user = new IdManager();
      this.tableLoading=true;
      user.queryListPage(this._getData()).then(res => {
        this.tableLoading=false;
        this.pages = res.data;
        console.log(res.data)
      })
    },
    // 当前页数修改时
    handleSizeChange(pageSize) {
      this.pages.pageSize = pageSize
      this.init();
    },
    // 当前页码修改时
    handleCurrentChange(page) {
      this.pages.page = page
      this.init();
    },
    //清除检索
    handleClearData() {
      this.user.name = '';
      this.user.address = "";
      this.init();
    },
    //检索
    handleSearchData() {
      this.init();
    },
    /*
  * 新增
  * */
    handleAdd(data){
    this.showPage.add=true;
  },
    /**
     * 修改
     */
    handleUpdate(data) {
     this.userOne = data;
      this.showPage.update = true;
    },

    handle_ev(){
      const selectData=this.$refs.select.selection
      if(selectData.length!==1){
        this.$tie.showError('请选择一条数据')
        return
      }
      this.userOne=selectData[0];
      this.showPage.check=true;

    },
    handle_delete(){
      const selectData=this.$refs.select.selection
      if (selectData.length<1){
        this.$tie.showError('请至少选择一条数据')
        return
      }
      console.log(selectData)
      // var ids=[];
      // for (let i = 0; i < selectData.length; i++) {
      //   ids.push(selectData[i].id)
      // }
      // console.log(ids)
      const ids= selectData.map(i=>i.id)
      const api = new IdManager();
      api.batchDelete(ids).then(res => {
        this.init();
      })
    },
    /**
     * 删除
     */
    handleDelete(data) {

      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        const user = new IdManager();
        user.delete(data).then(res => {
            this.init();
        })

      })
    },
    handle_close(obj){
      if(obj.name==="add"){
        this.showPage.add=false;
      }
      if(obj.name==="update"){
        this.showPage.update=false;
      }
      if (obj.name === 'detail') {
        this.showPage.detail = false;
      }
      if (obj.name === 'check') {
        this.showPage.check = false;
      }
      if(obj.isRefresh){
        this.init();
      }
      console.log(obj)
    },
    /**
     * 详情
     */
    handleDetail(data) {
      this.userOne = data;
      this.showPage.detail = true;
    },
    /**
     * 获取检索对象和分页对象
     * @private
     */
    _getData() {
      const data = this.user;
      console.log(data);
      data.page = this.pages.page;
      data.pageSize = this.pages.pageSize;
      return data;
    },

  }
}
</script>
<style scoped>

</style>
